import { useState, useEffect } from 'react';
import { history } from 'umi';
import styles from './index.less';

const totalTabs = [
    {
        key: 'systemInfomationsViews',
        text: '系统视图',
    },
    {
        key: 'baiscPlateViews',
        text: '基础平台视图',
    },
    {
        key: 'networkViews',
        text: '网络视图',
    },
    {
        key: 'equipmentViews',
        text: '物理设施视图',
    },
    {
        key: 'penentrationViews',
        text: '穿透视图',
    },
]

export default function CommonTabs(props) {
  const [currentTab, setCurrentTab] = useState(props.currentRoutes);

  useEffect(() => {
    setCurrentTab(props.currentRoutes);
  }, [props.currentRoutes])

  const handleClick = (item: any) => {
    history.push(`/${item.key}`)
  }

  return (
    <div className={styles.commonTabs}>
        {
            totalTabs?.map(item => {
                return(
                    <div 
                        className={styles.tabItem}
                        key={item.key}
                        style={currentTab.includes(item.key) ? 
                            {
                                color: '#fff',
                                background: '#2A5D99'
                            } : 
                            {}
                        }
                        onClick={handleClick.bind(null, item)}
                    >
                        {item.text}
                    </div>
                )
            })
        }
    </div>
  )
}
